<template>
	<view>
		<tt-bar title="课次评价详情" leftIcon="icon-back"></tt-bar>
		<view class="latelyBox">
			<text class="lateleTitle" v-if="csDate">{{csDate}} {{week}} {{ (csTime&&edTime)?(csTime+'-'+edTime):'' }}</text>
			<text >班级：{{cname}}</text>
			<text>课程：{{gname}}</text>
			<text >老师：{{tname}}</text>
			<text >教室：{{sroom}}</text>
			
		</view>
		<scroll-view class="studentList"  scroll-y="true"  :style="{'height':scHeight+'px'}">
			<view class="scList">
				<view class="studentRow" v-for="(item,index) in studentList" :key="index" @tap="jumpPage" data-url="editEvaluste" :data-btid="btid" :data-isedit="item.memoStatus" :data-id="item.id" :data-csdate="csDate" :data-index="index" :data-cstime="csTime" :data-edtime="edTime" :data-stname="item.name" :data-cname="cname">
					<view class="left">
						<text class="studentName">{{item.name}}</text>
						<text class="workStatus">{{workArr[item.status]}}</text>
					</view>
					<text class="isElt" :class="[item.memoStatus?'active':'']">{{item.memoStatus?'已评价':'未评价'}}</text>
					<text class="iconfont icon-right"></text>
				</view>

			</view>
			<emptyBox v-if="studentList.length<1" type="student"></emptyBox>
		</scroll-view>
		
		
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "../../components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			emptyBox,
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
			
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(360),
				cid: '',
				cname: '',
				gname:'',
				sroo:'',
				tname:'',
				workArr:['','签到','请假','缺勤','补课'],
				studentList: [],
				postStudent: [],
				btid: '',
				csDate:'',
				csTime:'',
				edTime:'',
				week:'',

			};
		},
		methods: {
			getData() {
				API.apiGetEvaluateList({batch_id:this.btid}).then(eltRes=>{
					this.studentList=eltRes.data.data;
				});
			},
			jumpPage(e){
				let _isEdit=parseInt(e.currentTarget.dataset.isedit);
				let _index=parseInt(e.currentTarget.dataset.index);
				if(_isEdit){
					uni.setStorageSync("eltData",this.studentList[_index]);
					this.toPage(e)
				}else{
					this.toPage(e)
				}
			},
			getWeek(e){
				console.log(e);
				if(e){
					let _arr=e.split('-')
					let _date=new Date();
					_date.setFullYear(parseInt(_arr[0]));
					_date.setMonth(parseInt(_arr[1])-1);
					_date.setDate(parseInt(_arr[2]));
					var week = {
						"0": "日",
						"1": "一",
						"2": "二",
						"3": "三",
						"4": "四",
						"5": "五",
						"6": "六"
					};
					this.week="周"+week[_date.getDay()];
					console.log(this.week);
				}else{
					this.week='';
				}
			}
			
		},
		onLoad(cfm) {

			if (cfm.btid) {
				this.isEdit = true;
				this.btid = cfm.btid
			}
			this.cid = cfm.cid;
			this.cname=cfm.cname;
			this.gname=cfm.gname;
			this.sroom=cfm.sroom;
			this.tname=cfm.tname;
			this.csDate=cfm.csdate;
			this.getWeek(cfm.csdate);
			this.csTime=cfm.cstime;
			this.edTime=cfm.edtime;
			uni.$on("upList",payload=>{
				this.getData();
			})
			this.getData();
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.getData()
				uni.stopPullDownRefresh();
			},1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.editBar{
		height: 110upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10rpx;
		margin: 0 20upx;
		padding: 0 30upx;
		
		image{
			width: 66upx;
			height: 66upx;
			margin-right: 20upx;
		}
		.label{
			font-size: 36upx;
			flex-grow: 1;
		}
		.value{
			font-size: 32upx;
			color: #909090;
		}
		.iconfont{
			font-size: 36upx;
			color: #c6c6c6;
			margin-left: 20upx;
		}
	}
	
	.latelyBox {
		display: flex;
		flex-direction: column;
		padding: 0upx 38upx;
		justify-content: center;
		color: #222222;
		background-color: #FFFFFF;
		height: 250upx;
		overflow: hidden;
		margin: 20upx 0 0 0 ;
		text {
			font-size: 28upx;
			color: #666666;
		}
		.lateleTitle{
			font-size: 32upx;
			margin-bottom: 16upx;
			color: #222222;
		}
		
	}
	

	
	.scList {
		padding: 28upx 20upx;
		display: flex;
		flex-direction: column;

		.studentRow {
			display: flex;
			align-items: center;
			height: 110upx;
			background-color: #ffffff;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10rpx;
			padding-left: 38upx;
			padding-right: 24upx;
			margin-bottom: 20upx;
			.isElt{
				font-size: 32upx;
				color: #ffac40;
			}
			.active{
				color: #5b5b5b;
			}
			.left{
				display: flex;
				flex-direction: column;
				flex-grow: 1;
			}
			.studentName {
				font-size: 28rpx;
				color: #5b5b5b;
			}
			.workStatus{
				font-size: 28upx;
				color: #ababab;
			}
			.iconfont{
				font-size: 40upx;
				margin-left: 20upx;
				color: #c6c6c6;
			}

			.btn {
				width: 110rpx;
				height: 78upx;
				border-radius: 10upx;
				border: solid 3upx #a6a3c0;
				text-align: center;
				box-sizing: border-box;
				line-height: 72upx;
				font-size: 28upx;
				color: #a6a3c0;
				margin-left: 28upx;
			}

		}
	}

	.ani {
		height: 0;
	}

	.btmFiexBtn {
		position: fixed;
		width: 100%;
		height: 120upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		button {
			width: 496upx;
			height: 80upx;
			background-color: #ffb423;
			border-radius: 40rpx;
			border: none;
			line-height: 80upx;
			color: #FFFFFF;
		}

		button:after {
			border: none;
		}
	}
</style>
